<template>
  <div class="container">
    <el-container>
      <el-main>
        <el-card class="box-card">
          <div>

            <el-form ref="ruleForm" inline label-position="left" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
              <div>
                <el-form-item label="选择时间范围" prop="timerange">
                  <el-date-picker
                    v-model="ruleForm.starttime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择起始日期时间"
                  />
                  <span>--</span>
                  <el-date-picker
                    v-model="ruleForm.endtime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择结束日期时间"
                  />
                </el-form-item>

              </div>
              <div>
                <el-form-item label="搜索条件" prop="keyword">
                  <el-input v-model="ruleForm.keyword" clearable autocomplete="off" placeholder="请输入域名或 http(s):// 开头完整 URL" style="width: 400px" />
                </el-form-item>

              </div>

              <div>
                <el-form-item label="查询类型" prop="type">
                  <el-radio-group v-model="ruleForm.type">
                    <el-radio label="url">URL刷新</el-radio>
                    <el-radio label="path">目录</el-radio>
                    <el-radio label="preheat">URL预热</el-radio>
                  </el-radio-group>
                </el-form-item>
              </div>
              <div>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </div>

            </el-form>
          </div>
        </el-card>
        <el-table
          ref="refTable"
          :data="tableData"
          style="width: 100%"
        >

          <el-table-column
            prop="Url"
            label="刷新记录"
          />
          <el-table-column
            prop="CreateTime"
            label="刷新时间"
          />
          <el-table-column
            prop="Status"
            label="状态"
          />
          <el-table-column
            v-if="tableData.length > 0 && tableData[0].Area"
            prop="Area"
            label="区域"
          />
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { flushHistory } from '@/api/cmdb/cdn'

export default {
  name: 'History',
  data() {
    return {
      ruleForm: {
        type: 'url'
      },
      rules: {},
      tableData: []
    }
  },
  methods: {
    flushHistory(history) {
      const historys = JSON.parse(history)
      console.log(historys)
      if (historys.PushLogs) {
        this.tableData = historys.PushLogs
      } else {
        this.tableData = historys.PurgeLogs
      }
    },
    submitForm(formName) {
      console.log(this.ruleForm)
      const params = {
        'starttime': this.ruleForm.starttime,
        'endtime': this.ruleForm.endtime,
        'type': this.ruleForm.type,
        'keyword': this.ruleForm.keyword
      }
      flushHistory(params).then(res => {
        this.flushHistory(res.data)
      })
    },
    resetForm(formName) {
      console.log(this.$refs[formName])
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>

</style>
